<template>
  <div>
    <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
    />
    <ul>
        <li v-for="(item, i) in historyList" :key="i" @click="hisClick(item)">
            <span :style="{color: i === 0? 'red': (i === 1? 'orange': (i === 2) ? 'pink': '')}">{{i + 1}}、 </span>
            {{item}}
        </li>
    </ul>
    </div>
</template>

<script>
export default {
  name: '',
  data() { 
    return {
        value: '',
        historyList: []
    }
  },
  created() {
      this.historyList = JSON.parse(localStorage.getItem('historyList')) || []
  },
  methods:{
      onSearch() {
        this.historyList.unshift(this.value)
        localStorage.setItem('historyList', JSON.stringify(this.historyList))
        this.$router.push({
            path: '/',
            query: {
                val: this.value
            }
        })
      },

      onCancel() {

      },

      hisClick(val) {
          this.$router.push({
            path: '/',
            query: {
                val: val
            }
        })
      }
  },
 }
</script>

<style scoped>
ul{
    padding: .4rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 4rem;
    align-items: center;
}
li{
    font-size: .3rem;
    line-height: .6rem;
    text-align: left;
    width: 50%;
}
</style>